<template>
  <view class="progress-container">
    <view v-if="showInfo" class="progress-info">
      <text class="progress-text">{{ currentStep }}/{{ totalSteps }}</text>
      <text class="progress-percent">{{ Math.round(percent) }}%</text>
    </view>
    <view class="progress-bar">
      <view class="progress-track">
        <view
            :class="{ 'animated': animated }"
            :style="{ width: percent + '%', backgroundColor: progressColor }"
            class="progress-fill"
        ></view>
      </view>
    </view>
    <view v-if="label" class="progress-label">
      <text>{{ label }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProgressBar',
  props: {
    currentStep: {
      type: Number,
      default: 0
    },
    totalSteps: {
      type: Number,
      default: 100
    },
    color: {
      type: String,
      default: '#007AFF'
    },
    showInfo: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: ''
    },
    animated: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    percent() {
      if (this.totalSteps === 0) return 0;
      return Math.min(100, Math.max(0, (this.currentStep / this.totalSteps) * 100));
    },

    progressColor() {
      if (this.percent >= 100) return '#28a745';
      if (this.percent >= 80) return '#007AFF';
      if (this.percent >= 60) return '#ffc107';
      return this.color;
    }
  },
  methods: {
      reset() {
      this.$emit('update:currentStep', 0);
      this.$emit('reset');
    }
  }
};
</script>

<style lang="scss" scoped>
.progress-container {
  width: 100%;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;

  .progress-text {
    font-size: 24rpx;
    color: #666;
  }

  .progress-percent {
    font-size: 24rpx;
    font-weight: bold;
    color: #007AFF;
  }
}

.progress-bar {
  width: 100%;
  margin: 10rpx 0;
}

.progress-track {
  width: 100%;
  height: 16rpx;
  background-color: #e9ecef;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s ease;
  position: relative;
}

.progress-label {
  text-align: center;
  margin-top: 15rpx;

  text {
    font-size: 24rpx;
    color: #666;
  }
}
</style>